<template>
  <div ref="boxRef" class="operationBoxWrap" v-show="visible">
    <div
      class="boxItem"
      v-for="(item,index) in operation"
      :key="index"
      @click="clickItem(item)"
    >{{item.label}}</div>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  components: {},
  data() {
    return {
      visible: false,
    };
  },
  mounted() {
    // 清除
    this.clearBox();

    // 显示
    this.visible = true;
    this.$refs.boxRef.style.left = window.event.pageX + 'px';
    this.$refs.boxRef.style.top = window.event.pageY + 'px';

    document.addEventListener('click', this.removeBox);
  },
  methods: {
    clearBox() {
      var boxWrap = document.getElementsByClassName('operationBoxWrap');
      if (boxWrap && boxWrap.length > 0) {
        for (let index = 0; index < boxWrap.length; index++) {
          const element = boxWrap[index];
          document.body.removeChild(element);
          // document.removeEventListener('click', this.removeBox);
        }
      }
    },
    removeBox() {
      this.visible = false;
      document.removeEventListener('click', this.removeBox);
      // document.body.removeChild(this.$refs.boxRef);
    },
    clickItem(item) {
      if (!item.callback) {
        return;
      }
      item.callback();
    }
  }
}
</script>

<style lang='scss' scoped>
.operationBoxWrap {
  padding: 5px 0;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0px 2px 4px 1px #dfdfdf;
  .boxItem {
    cursor: pointer;
    padding: 10px 25px;
    &:hover {
      background: #eceaea;
    }
  }
}
</style>